<template>
  <div v-if="length == 0" class="flex-center">
    <img src="/public/null.png" class="png" />
  </div>
  <a-comment v-else v-for="mess in likesList" :key="mess.m_id" class="List">
    <template #actions>
      <span key="date">{{ mess.m_date }}</span>
    </template>
    <template #avatar>
      <a-avatar
        v-if="mess.u_avatar"
        :src="'/api/avatar/' + mess.u_avatar"
        style="vertical-align: middle"
      />
      <a-avatar
        v-else
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      />
    </template>
    <template #content>
      <p v-if="mess.type == 1">
        <a :href="'/user/information?u_id=' + mess.u_id">{{ mess.u_name }}</a>
        点赞了你的文章
        <a-badge v-if="mess.ifChecked == 0" count="1" class="unread" />
      </p>
      <p v-else>
        <a :href="'/user/information?u_id=' + mess.u_id">{{ mess.u_name }}</a>
        点赞了你的评论
        <a-badge v-if="mess.ifChecked == 0" count="1" class="unread" />
      </p>
      <p>
        <b
          ><a
            style="color: black"
            :href="'/user/articledetail?a_id=' + mess.a_id"
            >{{ mess.a_title }}</a
          ></b
        >
      </p>
    </template>
  </a-comment>
</template>

<script>
import { ref, defineComponent, reactive } from "vue";
import { get, post, tip } from "@/common";

const likesList = ref({});
const length = ref(0);

const getLikesList = () => {
  get("/message/getLikesList").then((res) => {
    console.log(res.data);
    likesList.value = res.data;
    length.value = res.data.length; 
    post("/message/clear/1/2");
  });
};

export default defineComponent({
  setup(props, { emit }) {
    getLikesList();
    emit("select", "likes");
    return {
      likesList,
      length,
    };
  },
});
</script>
<style scoped>
.List {
  margin-left: 1cm;
}
.unread {
  float: right;
  margin-right: 20px;
}
.png {
  margin-top: 40px;
  margin-bottom: 40px;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>